<template>
    <div id="regist" :style="`height:${heigth}`">
        <div class='regist_div'>
            <van-form >
                <div style="padding:13px">
                <!-- 通过 pattern 进行正则校验 -->
                <van-field
                    v-model="phone"
                    placeholder="请输入手机号"
                    clearable
                    center
                    type="tel"
                />
               <van-field
                    v-model="sms"
                    center
                    clearable
                    placeholder="请输入短信验证码"
                    >
                    <template #button>
                        <van-button size="small" type="primary" @click="sendMsm">{{msmTime}}</van-button>
                    </template>
                </van-field>
                <!-- 通过 validator 进行异步函数校验 -->
                <van-field
                    v-model="userName"
                    placeholder="请输入用户名"
                    clearable
                    center
                    type="text"
                />
                  <van-field
                    v-model="password"
                    placeholder="请输入密码"
                    clearable
                    center
                    type="password"
                />
                  <van-field
                    v-model="password1"
                    placeholder="请再次输入密码"
                    clearable
                    center
                    type="password"
                />

                <van-field
                    readonly
                    clickable
                    name="area"
                    v-model="area"
                    placeholder="选择所在地区"
                    @click="showArea = true"
                    />
                    <van-popup v-model="showArea" position="bottom">
                    <van-area
                        :area-list="areaList"
                        @confirm="onConfirm"
                        @cancel="showArea = false"
                    />
                    </van-popup>

                    <van-field
                        readonly
                        clickable
                        name="calendar"
                        label=""
                        v-model="birthday"
                        placeholder="选择生日"
                        @click="showCalendar = true"
                        />
                        <van-calendar v-model="showCalendar" @confirm="confirmBirthday" />

                <van-field name="uploader" >
                    <template #input>
                        <van-uploader v-model="userImage" upload-text="上传头像" max-count="1" :after-read="upload"/>
                    </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button round block type="info" @click="submit">
                    提交注册
                    </van-button>
                </div>
                </div>
            </van-form>
        </div>
    
    </div>
</template>
<script>
import citys from '../../../assets/city'
import {regist} from '../../../request/mobile/mine/request_mine'
import {uploadPetImg} from '../../../request/mobile/mine/request_mine'
export default {
    data(){
        return{
            heigth:'',
            areaList:citys,
            showArea:false,
            checkCity:[],
            showCalendar:false,
            birthday:'',
            phone:'',
            sms:'',
            userName:'',
            password:"",
            password1:'',
            userImage:[],
            area:'',
            msmTime:'发送验证码',
            imgUrl:'',
        }
    },
    methods:{
        getHeight(){
            this.heigth = window.innerHeight+"px";
        },
        onConfirm(event){
            this.showArea=false
            this.area=event[0].name+" "+event[1].name+" "+event[2].name
            for(var index in event){
                this.checkCity.push(event[index])
            }
        },
        confirmBirthday(date){
            this.showCalendar=false
            console.log(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate());
            this.birthday=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()
        },
        upload(event){
            var base64Content = event.content;
            var fileContent = event.file;
            //this.fileList.push({url:'https://img.yzcdn.cn/vant/sand.jpg',name:''})
            var formData = new FormData();
            formData.append("file",fileContent)
            var baseUrl='https://pett.oss-cn-beijing.aliyuncs.com/';
             uploadPetImg(formData).then(res=>{
                if(res.code==200){
                    this.imgUrl=baseUrl+res.data
                    return;
                }
                this.$Toast(res.msg)
            })
        },
        submit(){
            if(this.sms==''){
               this.$Toast("请输入验证码！")
                return;
            }else if(this.userName==''){
                this.$Toast("请输入用户名！")
                return;
            }else if(this.password==''||this.password1==''){
                this.$Toast("请输入密码！")
                return;
            }else if(this.password!=this.password1){
                this.$Toast("两次输入密码不一致");
                return;
            }else if(this.area==''){
                this.$Toast("请选择所在地区");
                return;
            }else if(this.birthday==''){
                this.$Toast("请选择生日");
                return;
            }else if(this.imgUrl==''){
                this.$Toast("请上传头像");
                return;
            }
            var password = window.btoa(this.password)
            regist({userPhone:this.phone,userName:this.userName,userImage:this.imgUrl,password:password,userAddress:this.area})
                .then(res=>{
                    if(res.code==200){
                        this.$Toast.success("注册成功");
                        this.$router.push({path:'/login'})
                    }else{
                        this.$Toast(res.msg)
                    }
                })
            
            
        },
        sendMsm(){
            if(this.phone==''){
                this.$Toast("手机号为空！")
                return;
            }if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                this.$Toast("手机号格式不正确")
                return;
            }
            this.$Toast("验证码已发送");
            var time=60;
            var t1 = window.setInterval(tim=>{
                time--
                  if(time==0){
                    window.clearInterval(t1)
                    this.msmTime="发送验证码"
                 }else
                this.msmTime=time;
            },1000)
          
        }
    },
    created(){
        this.getHeight()
    }
}
</script>
<style scoped>
  #regist{
      background-color: white;
      padding: 30px 10px;
  }
  .regist_div{
      height: 510px;
      background-color: whitesmoke;
      border-radius: 5px; 
  }
</style>